@import './variables.scss';
@import './fty-tabs.scss';
@import './fty-tag.scss';
@import './fty-card.scss';
@import './fty-modal.scss';
@import './fty-list.scss';
@import './fty-avatar.scss';
@import './fty-table.scss';
@import './fty-toolbar.scss';
@import './fty-button.scss';
@import './fty-data-card.scss';
@import './fty-drag.scss';
@import './fty-animation-dance.scss';
@import './fty-font.scss';
@import './fty-alert.scss';
@import './fty-container.scss';
@import './scheme.scss';
@import '../terminal/terminal-tag';

body {
  // background-color: #DBEAFE;
}


.fty-box {}

.fty-box,
.el-card {
  .box-header {
    padding: 0px;
    position: relative;

    &.bottom-line {
      border-bottom: 1px solid #c2c7ce;
    }

    h1 {
      margin: 0.2em;
      font-weight: bold;
      font-size: 1.8em;
      color: $mainColor;

      .svg-container,
      i.title-logo {
        font-size: 0.8em;
        margin-left: 0px;
        color: #909399;
      }

      .title-second {
        font-size: 60%;
        color: #95aac9;
        font-weight: 400;
      }

      &.title {
        &::before {
          background-color: #2569c3;
          content: '';
          display: block;
          position: absolute;
          left: 0px;
          top: 10%;
          width: 3px;
          height: 80%;
        }
        padding-left: 10px;
      }
    }

    h2 {
      padding: 0.4em 0.2em 0.3em 0.2em;
      font-weight: bold;
      font-size: 1.4em;
      color: $mainColor;

      .svg-container,
      i.title-logo {
        font-size: 0.8em;
        margin-left: 0px;
        color: #909399;
      }

      .title-second {
        font-size: 70%;
        color: #95aac9;
        font-weight: 400;
      }

      &.title {
        &::before {
          background-color: #2569c3;
          content: '';
          display: block;
          position: absolute;
          left: 0px;
          top: 10%;
          width: 3px;
          height: 80%;
        }
        padding-left: 10px;
      }

    }

    h3 {
      padding: 0.3em 0.2em;
      font-weight: bold;
      font-size: 1.2em;
      color: $mainColor;

      .svg-container,
      i.title-logo {
        font-size: 0.8em;
        margin-left: 0px;
        color: #909399;
      }
    }

    .button-box {
      position: absolute;
      bottom: 0.3em;
      right: 0.4em;

      .svg-container {
        --tw-text-opacity: 1;
        color: #909399;
        font-size: 1.2em;
        margin-right: 5px;
        cursor: pointer;

        &:hover {
          color: #2c7be5;
        }
      }
    }
  }

  .search-box {
    padding: 8px 10px;

    .el-form-item {
      margin-bottom: 0px;
    }

    .query-button {
      margin-left: 0.7em;
    }
  }

  .pagination-wrapper {
    text-align: right;
  }
}


.alert-dark-toolbar {
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.75rem 1.25rem;

  top: 1.5rem;
  left: 50%;
  margin-bottom: 0;
  min-width: 350px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 1030;
}

.toolbar-dark {
  background-color: $mainColor;
  border-color: $mainColor;
  color: #fff;
}

.el-menu-item .svg-icon,
.el-submenu .svg-icon {
  --tw-text-opacity: 1;
  color: #153d77;
}

.el-menu {
  div.text-xs li.el-menu-item {

    span {
      font-size: 14px;
      font-weight: 400;
    }
  }
}


.fty-pagination {
  padding: 10px;
  margin-bottom: 5px;
}

.fty-transparent-30 {
  filter: alpha(Opacity=30);
  -moz-opacity: 0.3;
  opacity: 0.3;
}

.fty-transparent-50 {
  filter: alpha(Opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.fty-transparent-70 {
  filter: alpha(Opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.fty-hover-title {
  color: $mainColor;

  &:hover {
    color: #000000;
  }

  cursor: pointer;
}


.mlem-1 {
  margin-left: 0.1em;
}

.mlem-2 {
  margin-left: 0.2em;
}

.mlem-3 {
  margin-left: 0.3em;
}

.mlem-4 {
  margin-left: 0.4em;
}

.mlem-5 {
  margin-left: 0.5em;
}

.mlem-6 {
  margin-left: 0.6em;
}

.mlem-7 {
  margin-left: 0.7em;
}

.mlem-8 {
  margin-left: 0.8em;
}

.mlem-9 {
  margin-left: 0.9em;
}

.mlem-10 {
  margin-left: 1em;
}

.mlem-11 {
  margin-left: 1.1em;
}

.mlem-12 {
  margin-left: 1.2em;
}

.mlem-13 {
  margin-left: 1.3em;
}

.mlem-14 {
  margin-left: 1.4em;
}

.mlem-15 {
  margin-left: 1.5em;
}

.mlem-16 {
  margin-left: 1.6em;
}

.mlem-17 {
  margin-left: 1.7em;
}

.mlem-18 {
  margin-left: 1.8em;
}

.mlem-19 {
  margin-left: 1.9em;
}

.mlem-20 {
  margin-left: 2em;
}

.mlem-21 {
  margin-left: 2.1em;
}

.mlem-22 {
  margin-left: 2.2em;
}

.mlem-23 {
  margin-left: 2.3em;
}

.mlem-24 {
  margin-left: 2.4em;
}

.mlem-25 {
  margin-left: 2.5em;
}

.mlem-26 {
  margin-left: 2.6em;
}

.mlem-27 {
  margin-left: 2.7em;
}

.mlem-28 {
  margin-left: 2.8em;
}

.mlem-29 {
  margin-left: 2.9em;
}

.mlem-31 {
  margin-left: 3.1em;
}

.mlem-32 {
  margin-left: 3.2em;
}

.mlem-33 {
  margin-left: 3.3em;
}

.mlem-34 {
  margin-left: 3.4em;
}

.mlem-35 {
  margin-left: 3.5em;
}

.mlem-36 {
  margin-left: 3.6em;
}

.mlem-37 {
  margin-left: 3.7em;
}

.mlem-38 {
  margin-left: 3.8em;
}

.mlem-39 {
  margin-left: 3.9em;
}

.mlem-40 {
  margin-left: 4em;
}


.fty-hover {

  .hover-target,
  &.hover-target {
    display: none;
  }

  &:hover {

    .hover-target,
    &.hover-target {
      display: inherit;
    }
  }
}
